import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class RightBottomTU extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }

    componentWillReceiveProps () {
        this.onsave() 
    }
    onsave = () => {
        let data = {
            date:this.props.time
        }
        request({
            url: `/zhrq-web/report/bottledgasSupplystationScore/scoresRanking`,
            method: 'POST',
            data:data
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top:"10%",
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data.nameList,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    // type : 'category',
                    // data : ['10','20','30','40'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            series : [
                {
                    name:'分数',
                    type:'bar',
                  
                    data:data.scoreList
                },
                
            ],
            label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                },
                barWidth: '20%',
                barGap:'0%',
                barCategoryGap:'50%',
                itemStyle:{
                    normal: {
                        show: true,
                        color: '#FFD16F',
                        barBorderRadius:50,
                        borderWidth:0,
                        borderColor:'#333',
                    }
                },
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"27vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default RightBottomTU;
